{% extends 'base.html' %}
{% block css-content %}
    <link rel="stylesheet" href="/static/jquery-confirm/jquery-confirm.min.css">
    <link href="/static/datatable/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/bootstrap-select.css">
	<script src="/static/ace/js/ace.js" type="text/javascript" charset="utf-8"></script>
	<script src="/static/ace/js/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
	<script src="/static/ace/js/ext-old_ie.js" type="text/javascript" charset="utf-8"></script>
	<script src="/static/ace/js/theme-monokai.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css"> 
		pre {
			overflow: auto;
			white-space: normal;
			white-space: pre-wrap; /* css-3 */
			white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
			white-space: -pre-wrap; /* Opera 4-6 */
			white-space: -o-pre-wrap; /* Opera 7 */
			word-wrap: break-word; /* Internet Explorer 5.5+ */
			font-family: Consolas, monospace;
			color: #ADFF2F;
			background-color: #000000;
		}	
		td.details-control {
		    background: url('/static/images/details_open.png') no-repeat center center; */
		    cursor: pointer;
		}
		tr.shown td.details-control {
		    background: url('/static/images/details_close.png') no-repeat center center;
		} 
		#compile-editor-add {
			width: 100%;
			height: 200px;
	   }	
		#compile-editor-modf {
			width: 100%;
			height: 200px;
	   }	      	
	</style>	  
{% endblock %}
{% block page-content %}
        <div class="clearfix"></div>
		<div class="row">
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>动态资产组列表 <small>Dynamic Assets List</small></h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <ul class="dropdown-menu" role="menu">
                          <li><a href="#">Settings 1</a>
                          </li>
                          <li><a href="#">Settings 2</a>
                          </li>
                        </ul>
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                        <div class="product_price">
		                	<button type="button" class="btn btn-xs btn-default" id="add_inventory_button"><i class="glyphicon glyphicon-plus"></i></button>                  
		                    <table id="inventoryListTable" class="table table-striped table-bordered">
		                      <thead>
		                        <tr>
					                <th class="text-center">详细</th>
					                <th class="text-center">ID</th>
					                <th class="text-center">名称</th>
					                <th class="text-center">用途描述</th>
					                <th class="text-center">添加人</th>
					                <th class="text-center">添加日期</th>
									<th class="text-center">操作</th>
		                        </tr>
		                      </thead>
		                      <tbody>
		                      	{% for ds in assets.inventoryList %}
		                        <tr>
		                          	<td class="text-center"></td>
	                        		<td class="text-center">
	                        			{{ds.id}}	
	                        		</td>    
	                        		<td id="inventory_{{ds.id}}" class="text-center">
	                        			{{ds.name}}	
	                        		</td>   		                                		                            			
	                        		<td class="text-center">
	                    				{{ds.desc}}
	                        		</td>			                                		                                		
	                        		<td class="text-center">
	                        			{% for u  in assets.userList %}
	                        				{% if u.id ==  ds.user%}
	                        					{{u.username}}

	                        				{% endif %}
	                        			{% endfor %}
	                        		</td>
	                        		<td class="text-center">
	                        			{{ds.create_time|date:"Y/m/d H:i  "}}
	                        		</td>
		                          <td class="text-center">
			                          <div class="btn-group btn-group-sm">
			                            <button type="button" name="btn-inventory-delete" value="{{ds.id}}" class="btn btn-default btn-sm" aria-label="Justify"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
			                            </button>
			                          </div>                         
		                          </td>
		                        </tr>
		                        {% endfor %}
		                      </tbody>
		                    </table>                          
                        </div> 
                   </div>
                </div>		
			  </div>
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>动态资产组管理 <small>Dynamic Assets</small></h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <ul class="dropdown-menu" role="menu">
                          <li><a href="#">Settings 1</a>
                          </li>
                          <li><a href="#">Settings 2</a>
                          </li>
                        </ul>
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                  	<!--<div class="" role="tabpanel" data-example-id="togglable-tabs"  id="add_inventory" style="display:none;">-->
                    <div class="" role="tabpanel" data-example-id="togglable-tabs"  id="add_inventory">
                      <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#tab_content1" id="#group" role="tab" data-toggle="tab" aria-expanded="true"><i class="fa fa-cubes"></i> 资产组</a>
                        </li>
                        <li role="presentation" class=""><a href="#tab_content2" role="tab" id="#host" data-toggle="tab" aria-expanded="false"><i class="fa fa-tasks"></i> 主机变量</a>
                        </li>
                        <li role="presentation" class=""><a href="#tab_content3" role="tab" id="#inventoryroup" data-toggle="tab" aria-expanded="false"><i class="fa fa-users"></i> 资产组变更</a>
                        </li>                        
                      </ul>
                      <div id="myTabContent" class="tab-content">
                        <div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="#group">
							<div class="col-md-6 col-xs-12">
								<legend>
									<i class="fa  fa-paper-plane"></i> 动态资产组
								</legend>
								<form class="form-horizontal form-label-left" method="post" id="inventory" enctype="multipart/form-data">
									{% csrf_token %}
									<div class="form-group">
	 									<label><font color='red'>* </font>资产组名称<i class="fa fa-info-circle" data-toggle="tooltip" title="名称"></i></label>
										<input type="text" required="required" class="form-control"  rows="3" name="inventory_name" id="inventory_name" value=""></input>
									</div>								
									<div class="form-group">
	 									<label><font color='red'>* </font>功能描述<i class="fa fa-info-circle" data-toggle="tooltip" title="说明用途"></i></label>
										<textarea type="text" required="required" class="form-control" rows="3" name="inventory_desc" id="inventory_desc"></textarea>
									</div>																						
									<lable><button type="button" class="btn btn-default btn-sm"" id="addInventory">添加</button></lable>
									<button type="reset" class="btn btn-default btn-sm">撤销</button>
								</form>
							</div>
							<div class="hr hr32 hr-dotted"></div>
							<div class="col-md-6 col-xs-12">
								<legend>
									<i class="fa  fa-paper-plane-o"></i>主机组
								</legend>  
								<form role="form" method="post" id="inventory_group" enctype="multipart/form-data">
								<div class="form-group" >			 		             
									<label><font color='red'>* </font>资产组</label>
									<select class="selectpicker" data-live-search="true"  data-size="10" data-selected-text-format="count > 3" name="inventory" id="inventoryIds"  data-width="100%"  >
										{% for ds in assets.inventoryList %}
											<option name="inventory" value="{{ds.id}}">{{ds.name}}</option>
										{% endfor %}	
									</select>		
								</div>									
								<div class="form-group">
										<label><font color='red'>* </font>主机组名称<i class="fa fa-info-circle" data-toggle="tooltip" title="资产组名称(请使用字母表示)"></i></label>
									<input class="form-control" id="group_name" name="group_name" value=""></input>
								</div>								
								<div class="form-group" >			 		             
									<label><font color='red'>* </font>添加主机</label>	
	                                 <select multiple class="selectpicker" data-live-search="true"  data-size="10" data-width="auto" data-selected-text-format="count > 5"   name="deploy_server"  id="server_list" required>
	                                 	{% for ds in assets.serverList %}
	                                 		<option name="server" value="{{ds.id}}">{{ds.ip}}</option>
	                                 	{% endfor %}
	                                 </select>		
								</div>																																															
		
								<div class="form-group" id="inventoryVars">
									<label>外部变量<i class="fa fa-info-circle" data-toggle="tooltip" title="该组的外部变量"></i></label>
									<div id="compile-editor-add" class="ace_editor"></div> 
								</div>
									<lable id="auditContol"><button type="button" class="btn btn-default btn-sm" id="addInventoryGroups">添加</button></lable>
									<button type="reset" class="btn btn-default btn-sm">撤销</button>								
								</form>
							</div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="#host">
							<div class="col-lg-6">
								<legend>
									<i class="fa  fa-paper-plane"></i> 选择主机
								</legend>
								<form role="form" method="post" id="add_host_vars">
									{% csrf_token %}
									<div class="form-group" >			 		             
										<label><font color='red'>* </font>选择主机</label>	
		                                 <select class="selectpicker" data-live-search="true"  data-size="10" name="deploy_server"  data-width="100%" id="hostLists" required>
		                                 		<option name="server" value="" selected="selected">选择一个主机进行配置</option>
		                                 	{% for ds in assets.serverList %}
		                                 		<option name="server" value="{{ds.id}}">{{ds.ip}}</option>
		                                 	{% endfor %}
		                                 </select>	
									</div>	
									<div class="form-group" >
										 <label><font color='red'>* </font>主机变量<i class="fa fa-info-circle" data-toggle="tooltip" title="字典类型"></i></label>
										 <textarea class="form-control" rows="10" name="host_vars" id="host_vars"></textarea>												
									</div>																					
									<lable id="auditContol"><button type="button" class="btn btn-default btn-sm" id="addHostVars" >添加</button></lable>
									<button type="reset" class="btn btn-default btn-sm">撤销</button>
								</form>
							 </div>
                        </div>  
                        <div role="tabpanel" class="tab-pane fade" id="tab_content3" aria-labelledby="#inventoryroup">
							<div class="col-lg-6">
								<legend>
									<i class="fa  fa-paper-plane"></i>动态资产组
								</legend>
								<form role="form" method="post" id="modf_inventory">
									{% csrf_token %}
									<div class="form-group">
										<label><font color='red'>* </font>资产组</label>
		                                 <select class="selectpicker" data-live-search="true"  data-size="10" data-selected-text-format="count > 3" name="deploy_inventory" id="deploy_inventory"  data-width="100%" id="hostLists" required>
		                                 		<option name="inventory" value="" >选择一个资产组</option>
		                                 	{% for ds in assets.inventoryList %}
		                                 		<option name="inventory" value="{{ds.id}}">{{ds.name}}</option>
		                                 	{% endfor %}
		                                 </select>										
									</div>
									
									<div class="form-group">
										<label><font color='red'>* </font>主机组</label>
									    <div class="input-group col-md-12">									    	
									        <div class="input-group-btn">
			                                 <select class="selectpicker"   data-live-search="true"  data-size="10"  data-width="100%"  name="deploy_inventory_groups"  id="deploy_inventory_groups"  required>
												<option name="deploy_inventory_groups" value="">请选择一个主机组</option>
                                         	 </select>
									        </div>
									        <span class="input-group-btn">
									            <button class="btn btn-default btn-sm" id="deploy_inventory_groups_delete" type="button"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
									        </span>
									    </div>
									</div>									
											
									<div class="form-group" >			 		             
										<label><font color='red'>* </font>修改主机</label>	
		                                 <select  class="selectpicker" multiple data-live-search="true"  data-size="10" name="inventory_group_server"  data-selected-text-format="count > 3" data-width="100%" id="inventory_group_server" required>
		                                 		<option name="inventory_group_server" value="" >选择一个主机进行配置</option>
		                                 </select>	
									</div>																	
									<div class="form-group" >
										 <label><font color='red'>* </font>组变量<i class="fa fa-info-circle" data-toggle="tooltip" title="资产组变量"></i></label>
										 <div id="compile-editor-modf" class="ace_editor"></div> 											
									</div>																					
									<lable><button type="button" class="btn btn-default btn-sm" id="modfInventoryGroup" >修改</button></lable>
									<button type="reset" class="btn btn-default btn-sm">撤销</button>
								</form>	
							 </div>                                                                     
                      </div>
                    </div>                                  
                  </div>
                </div>
              </div>
        </div>                 
{% endblock %}
{% block js-content %}
	<script src="/static/jquery-confirm/jquery-confirm.min.js"></script>
    <script src="/static/datatable/datatables.net/js/jquery.dataTables.min.js"></script>
	<script src="/static/datatable/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>	
	<script src="/static/js/deploy/deploy.js"></script>
	<script src="/static/validator/validator.js"></script>
{% endblock %}